<div class="odk-screen">
    {{#if showHeader}}
        <div class="odk-header" data-role="header" data-theme="c" data-position="fixed">
            <div class="odk-options-btn"><a data-role="button" data-inline="true">Collect</a></div>
            <div class="headerNavBtns">
                {{#if enableBackNavigation}}
                    <a class="odk-prev-btn
                    {{#unless enableBackNavigation}}ui-disabled{{/unless}}"
                    data-role="button" data-icon="arrow-l" data-iconpos="left" data-inline="true">back</a>
                {{/if}}
                
                <a class="odk-next-btn
                {{#unless enableForwardNavigation}}ui-disabled{{/unless}}"
                data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">next</a>
                
           </div>
           {{#if false}}
                Disabling the formTitle because there isn't enough room for it.
                <h1 style="margin-top:1em;">{{localize formTitle}}{{#if instanceName}} - {{localize instanceName}}{{/if}}</h1>
            {{/if}}
        </div>
    {{/if}}
    <div data-role="content" class="odk-scroll odk-container">
    {{#if loading}}
        <div>Please wait...</div>
    {{/if}}
    </div>
    {{#if showFooter}}
    <div class="odk-nav">
        <div data-role="footer" data-theme="d">
            {{#if enableNavigation}}
                <div data-role="navbar" class="ui-state-persist">
                    <ul>
                    {{#if enableBackNavigation}}
                        <li><a class="odk-prev-btn" data-icon="arrow-l" data-iconpos="left">back</a></li>
                    {{/if}}
                    {{#if enableForwardNavigation}}
                        <li><a class="odk-next-btn" data-icon="arrow-r" data-iconpos="right">next</a></li>
                    {{/if}}
                    </ul>
                </div>
            {{/if}}
        </div>
    </div>
    {{/if}}
    <div data-role="popup" data-theme="a" data-overlay-theme="a" id="screenPopup">
        <p class="message"></p>
        <button data-theme="a" id="ok-btn">OK</button>
    </div>
    {{! I have some concerns over inefficiency from including all the popup html in this template since it gets rerendered on every page change.}}
    {{! If it turns out to be a problem we can dynamically construct the popups when they are opened.}}
    <div data-role="popup" data-theme="d" data-overlay-theme="d" id="optionsPopup">
        <ul data-role="listview" data-inset="true" data-theme="d">
			<li><a data-rel="popup" class="languageMenu">Language</a></li>
			<li><a href="{{promptLink "_hierarchy"}}" data-rel="popup">Hierarchy</a></li>
			<li><a href="{{promptLink "_instances"}}" data-rel="popup">Save + Exit</a></li>
		</ul>
    </div>
    <div data-role="popup" data-theme="d" data-overlay-theme="d" id="languagePopup">
        <ul data-role="listview" data-inset="true" data-theme="d">
            {{#each locales}}
        		<li><a id="{{label}}" class="language" data-rel="popup">{{label}}</a></li>
            {{/each}}
		</ul>
    </div>
    <div id="block-ui"></div>
</div>
